<template>
  <div class="consumerView pd-20">
    <div class="detailView">
      <div class="detail">
        <div class="name">头像</div>
        <div class="value">
          <img :src="item.headImageUrl"
               alt="头像"
               preview="consumerView"
               style="width: 50px;height: 50px;border-radius: 50%;">
        </div>
      </div>
      <div class="detail">
        <div class="name">账号</div>
        <div class="value">{{item.loginName}}</div>
      </div>
      <div class="detail">
        <div class="name">用户名</div>
        <div class="value">{{item.nickName}}</div>
      </div>
      <div class="detail">
        <div class="name">身份证号</div>
        <div class="value">{{item.idCard}}</div>
      </div>
      <div class="detail">
        <div class="name">身高</div>
        <div class="value">{{item.height}}cm</div>
      </div>
      <div class="detail">
        <div class="name">体重</div>
        <div class="value">{{item.weight}}kg</div>
      </div>
      <div class="detail">
        <div class="name">邀请码</div>
        <div class="value">{{item.inviteCode}}</div>
      </div>
      <div class="detail">
        <div class="name">属地</div>
        <div class="value">{{item.area}}</div>
      </div>
      <div class="detail">
        <div class="name">出生日期</div>
        <div class="value">{{item.birthday}}</div>
      </div>
      <div class="detail">
        <div class="name">性别</div>
        <div class="value">{{item.sex == '0'? '女':'男'}}</div>
      </div>
      <div class="detail">
        <div class="name">是否在线</div>
        <div class="value">{{item.isOnline == '0'? '离线':'在线'}}</div>
      </div>
      <div class="detail">
        <div class="name">是否启用</div>
        <div class="value">{{item.isUse == '0'? '启用':'停用'}}</div>
      </div>
      <el-card class="mt-20">
        <div slot="header">家庭成员</div>
        <div>
          <Table stripe
                 border
                 :columns="tableCol1"
                 :data="item.memberList"></Table>
        </div>
      </el-card>
      <el-card class="mt-20">
        <div slot="header">收货地址</div>
        <div>
          <Table stripe
                 border
                 :columns="tableCol2"
                 :data="item.userAddressList"></Table>
        </div>
      </el-card>
      <p class="mt-20 goPage"
         align="center">
        <el-button type="primary"
                   @click="goPage">返 回</el-button>
      </p>
    </div>
  </div>
</template>

<script>
  export default {
    name: "consumerView",
    data () {
      return {
        item: {},
        tableCol1: [
          {
            type: 'index2',
            title: '',
            width: 60,
            render: (h, params) => {
              return h('span', params.index + 1);
            }
          },
          {
            title: '头像',
            key: 'headImageUrl',
            // width: 95,
            render: (h, params) => {
              return h('div', [
                h('img', {
                  attrs: {
                    src: params.row.headImageUrl,
                    preview: 'consumerView'
                  },
                  style: {
                    width: '50px',
                    height: '50px',
                    margin: '10px',
                    borderRadius: '50%'
                  }
                }),
              ]);
            }
          },
          {
            title: '名称',
            key: 'name',
          },
          {
            title: '身高（cm）',
            key: 'height',
          },
          {
            title: '体重（kg）',
            key: 'weight',
          },
          {
            title: '出生日期',
            key: 'age',
          },
          {
            title: '身份证号',
            key: 'idCard',
          },
          {
            title: '属地',
            key: 'address',
          },
          {
            title: '性别',
            key: 'sex',
            render: (h, params) => {
              let tmp = ''
              if (params.row.sex == 0) {
                tmp = '女';
              } else {
                tmp = '男';
              }
              return h('span', tmp);
            }
          },
        ],
        tableCol2: [
          {
            type: 'index2',
            title: '',
            width: 60,
            render: (h, params) => {
              return h('span', params.index + 1);
            }
          },
          {
            title: '收货人',
            key: 'name',
          },
          {
            title: '电话',
            key: 'telePhone',
          },
          {
            title: '地址',
            key: 'area',
          },
          {
            title: '默认地址',
            key: 'isDefault',
            render: (h, params) => {
              let tmp = ''
              if (params.row.isDefault == 0) {
                tmp = '';
              } else {
                tmp = '默认地址';
              }
              return h('span', tmp);
            }
          },
        ],
      }
    },
    mounted () {
      this._getViewById()
    },
    methods: {
      _getViewById () {
        this.ajax({
          type: this.api.consumerView.type,
          url: this.api.consumerView.url,
          data: {
            id: this.$route.query.id
          },
          success: (data) => {
            this.item = data.object
            this.$previewRefresh()
          },
          error: (data) => {
            this.$Message.error(data.message);
          }
        })
      },
      // 返回
      goPage () {
        this.$router.push({ name: 'consumerList' })
      }
    },
    filters: {
      typeId: (value, wdStudioAllTypeList) => {
        for (let i = 0; i < wdStudioAllTypeList.length; i++) {
          if (value == wdStudioAllTypeList[i].id) {
            return wdStudioAllTypeList[i].name
          }
        }
        return value
      }
    }
  }
</script>

<style lang="scss" type="text/scss" rel="stylesheet/scss">
  .consumerView {
  }
  .goPage {
    padding-bottom: 20px;
  }
</style>
